
<template>
  <div class="main-div">
    <Row >
      <Col span="24">
        <Card  dis-hover class="task-card">
          <div class="app-container">
            <el-row type="flex" justify="start">
              <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width='68px' inline size='mini'>
                <el-form-item label="状态">
                  <Select v-model="statusDefault" style="width:200px">
                    <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <Modal
              :mask-closable="false"
              title="添加委托"
              v-model="addModel"
              :transfer="false"
              width="80%">

<!--              <div slot="footer"  v-if="addForm.id.length==0">-->
<!--                <Button type="primary" @click="handleSubmit('addForm')">确定</Button>-->
<!--                <Button @click="handleReset('addForm')">取消</Button>-->

<!--              </div>-->

            </Modal>

            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    fixed
                    prop="name"
                    label="名称"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="formKey"
                    label="流程别名"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="formDesc"
                    label="描述"
                    width="100"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="formType"
                    label="类型"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="groupName"
                    label="分组"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.status == null || scope.row.status == ''" type="warning">未发布</el-tag>
                      <el-tag v-else type="success">已发布</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="version"
                    label="版本号"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="main"
                    label="是否主版本"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.main == '1'" type="success">是</el-tag>
                      <el-tag v-else type="warning">否</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="operate"
                    label="操作"
                    width="200"
                  >


                    <template slot-scope="scope">
<!--                      <Button  type="primary" size="small"    @click="hisVersionDefDetail(scope.row)">明细</Button>-->
                      <Button v-if="scope.row.main == '1'" size="small" type="primary"  ghost @click="setVersion(scope.row.id)">设为主版本</Button>
                      <Button v-if="scope.row.main == '0'" size="small" type="primary" ghost  @click="setVersion(scope.row.id)">设为主版本</Button>
                      <Button v-if="scope.row.main == '0'"  type="error" size="small" ghost  @click="del(scope.row.id)">删除</Button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
    <Row>
      <Col span="24">
        <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getVersionManagerByKey,setModelerVersion,deleteModelerVersion} from "@/api/analy";
  import {getFormModelTableListAllJson,formUpdateMain,formRemove} from "@/api/form";
  import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    components:{
      Footer
    },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        addModel: false,
        chartData: {},
        sellerId: 0,
        shopName: [],
        statusDefault: '',
        statusList:[
          {label:"未发布",value:"draft"},
          {label:"已发布",value:"deploy"},
        ],
        queryForm: {
          modelKey: "",
          modelId: "",
          status: "",
          page: 0,
          limit: 10,
        },
        categoryData: [
        ]
      }
    },
    mount() {

      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      var query= this.$route.query;
      this.queryForm.modelKey=query.modelKey;
      this.getData()
    },
    methods: {
      setVersion:function(id){
        formUpdateMain(id).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
          this.getData();
        })

      },
      del:function(id){
        formRemove(id).then((response) => {
          if (response.code==0){
            this.getData()
          }
        })
      },
      hisVersionDefDetail:function(data){
      this.addModel=true
      },
      queryFormCreateTime:function(e){
        this.queryForm.tmpCreateTime=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.tmpEndTime=e;
      },
      queryMethod:function(){
        var name=  this.queryForm.name;
        var tmpCreateTime=  this.queryForm.tmpCreateTime;
        if (tmpCreateTime ){
          if (tmpCreateTime[0]){
            this.queryForm.createTime=tmpCreateTime[0]+" - "+tmpCreateTime[1];
          }
        }
        getVersionManagerByKey(this.queryForm).then((response) => {
          this.tableData = response.data

          this.total = parseInt(response.count);

        })

      },

      getData: function () {

        getFormModelTableListAllJson(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.status=this.statusDefault;
        this.getData()
        this.queryForm.status=""
      },
      reset() {
        this.statusDefault = "";
      }

    }

  }

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }

</style>
